<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Promise测试</title>
    <script>

        // 先废除浏览器本身的，方便测试
        delete window.Promise;

    </script>
    <script src="../dist/polyfill.js"></script>
</head>

<body>

    <script>


        // .catch() 其实只是没有给 handleFulfilled 预留参数位置的 .then() 而已
        // 一旦状态确定了，会按照顺序一层层拨开

        window.p001 = new Promise(function (resolve, reject) {

            setTimeout(function () {

                console.log("=======================\n <!-- new方式的常规用法 -->\n=======================");

                // resolve('成功了');
                reject('拒绝了');

            }, 1000);

        })

            // 1
            .then(function (data) {

                console.log('then1', data);

                // console.log(this);
                // debugger

                return 'then1-return';

            },
                function (error) {

                    console.error('then1', error);

                    // console.log(this);
                    // debugger

                    return Promise.reject('静态方法拒绝了');
                    // return Promise.resolve('静态方法同意了');
                    // debugger
                    // return dd;
                    // return '静态方法同意了 return';

                }
            )



            // 2
            .catch(function (error) {

                console.error('catch', error);
                return '捕获错误方法';
                // var dd= Promise.reject('捕获错误方法拒绝了');
                // console.log(typeof dd);
                // debugger
                // return dd;

            })

            .finally(function (result) {

                console.warn('finally（提前的）1', result);

            })
            .finally(function (result) {

                console.warn('finally（提前的）2', result);

            })

            // 1-1
            .then(function (data) {

                console.log('then 1-1', data);

                return 'then 1-1 兑现';

            },
                function (error) {

                    console.error('then 1-1', error);

                    return 'then 1-1 拒绝';

                })

            // 3
            .finally(function (result) {

                console.warn('finally', result);

            });

    </script>

    <script>

        // 一旦返回Promise对象，后续挂载的相对于挂到这个Promise中

        new Promise(function (resolve, reject) {

            setTimeout(function () {

                console.log("=======================\n <!-- 如果中途返回的是一个Promise对象 -->\n=======================");

                resolve('成功了');

            }, 2000);

        }).then(function (data) {

            console.log('1', data);

            return new Promise(function (resolve2) {

                setTimeout(function () {
                    resolve2('返回的Promise同意了');
                }, 1000);

            }).then(function (data) {

                console.log('返回的Promise本身的then', data);

                return '返回的Promise本身的then的返回值';

            });

        }).then(function (data) {

            console.log('2', data);

        }).finally(function (result) {

            console.warn('finally', result);

        });

    </script>

    <script>

        console.log("=======================\n <!-- Promise.all -->\n=======================");

        var p1 = new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve('成功了')
            }, 2000);
        }).then(function (data) {
            console.log(data);
            return 'all-1';
        })

        var p2 = new Promise(function (resolve, reject) {
            resolve('success')
        })

        var p3 = Promise.reject('失败')

        Promise.all([p1, p2]).then(function (result) {
            console.log(result)               //['all-1', 'success']
        }).catch(function (error) {
            console.log(error)
        })

        Promise.all([p1, p3, p2]).then(function (result) {
            console.log(result)
        }).catch(function (error) {
            console.log(error)      // 失败了，打出 '失败'
        })

    </script>

    <script>

        console.log("=======================\n <!-- Promise.any -->\n=======================");

        var pErr = new Promise(function (resolve, reject) {
            reject("总是失败");
        });

        var pSlow = new Promise(function (resolve, reject) {
            setTimeout(resolve, 500, "最终完成");
        });

        var pFast = new Promise(function (resolve, reject) {
            setTimeout(resolve, 100, "很快完成");
        });

        Promise.any([pErr, pSlow, pFast]).then(function (value) {
            console.log(value);
            // pFast fulfils first
        })
        // 期望输出: "很快完成"

    </script>


    <script>

        console.log("=======================\n <!-- Promise.race -->\n=======================");

        const promise1 = new Promise(function (resolve, reject) {
            setTimeout(resolve, 500, 'one');
        });

        const promise2 = new Promise(function (resolve, reject) {
            setTimeout(resolve, 100, 'two');
        });

        Promise.race([promise1, promise2]).then(function (value) {
            console.log(value);
            // Both resolve, but promise2 is faster
        });
        // expected output: "two"

    </script>

    <script>

        console.log("=======================\n <!-- Promise.allSettled -->\n=======================");

        const promise11 = Promise.resolve(3);
        const promise22 = new Promise(function (resolve, reject) { setTimeout(reject, 100, 'foo') });
        const promises = [promise11, promise22];

        Promise.allSettled(promises).then(function (results) {

            console.log(results);

        });

        // expected output:
        [
            { status: "fulfilled", value: 3 },
            { status: "rejected", reason: "foo" }
        ]

    </script>

</body>

</html>
